<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="输入关键字" v-focus>
    </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    // vue本身提供的指令都是v-开头，默认只能使用vue提供的这些指令，都是如果想要自己定义指令，则需要使用directives
    // Vue.directive('focus', {//定义全局指令，可以在任何地方使用
    //     inserted(el) {
    //         console.log('focus回调函数');
    //         el.focus()//让表单元素聚焦（获得焦点）
    //     }
    // })

    var v = new Vue({
        el: '#app',
        directives: {//定义局部指令,只能在当前位置使用
            focus:{
            //inserted会在当前指令所在标签插入到父标签时执行
            inserted(el){
                console.log('focus回调函数');
                el.focus()//让表单元素聚焦（获得焦点）
            }
            }
        }
    })
</script>